const path = {
    html: {
        src: 'src/**/*.html', // src下面的所有文件夹下的所有html文件，下面的js，css以此类推
        dest: 'dist' // 处理的结果放到dist目录
    },
    css: {
        src: 'src/css/**/*.scss', // src下面css目录里的所有文件夹下的所有css文件
        dest: 'dist/css' // 处理的结果放到dist下的css目录里
    },
    js: {
        src: 'src/js/**/*.js',
        dest: 'dist/js'
    },
    imgs: {
        src: 'src/imgs/**',
        dest: 'dist/imgs'
    },
    libs: {
        src: 'src/libs/**',
        dest: 'dist/libs'
    },
    ico: {
        src: 'src/favicon.ico',
        dest: 'dist'
    }
}
const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      uglify = require('gulp-uglify'),
      babel = require('gulp-babel'),
      cleanCss = require('gulp-clean-css'),
      autoPrefixer = require('gulp-autoprefixer'),
      sass = require('gulp-sass'),
      connect = require('gulp-connect'),
      del = require('del'),
      { createProxyMiddleware } = require('http-proxy-middleware')
const delDist = () => del('dist')
const html = () => {
    return gulp.src(path.html.src)
           .pipe(htmlmin({
            removeComments: true,//清除HTML注释
        	collapseWhitespace: true,//压缩HTML
        	collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
      		removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      		removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
      		removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      		minifyJS: true,//压缩页面JS
      		minifyCSS: true//压缩页面CSS 
           }))
           .pipe(gulp.dest(path.html.dest))
           .pipe(connect.reload())
}
const js = () => {
    return gulp.src(path.js.src)
           .pipe(babel({
               presets:['@babel/env']
           }))
           .pipe(uglify())
           .pipe(gulp.dest(path.js.dest))
           .pipe(connect.reload())
}
const css = () => {
    return gulp.src(path.css.src)
           .pipe(sass())
           .pipe(autoPrefixer({
               cascade:false
           }))
           .pipe(cleanCss())
           .pipe(gulp.dest(path.css.dest))
           .pipe(connect.reload())
}
const imgs = () => gulp.src(path.imgs.src).pipe(gulp.dest(path.imgs.dest))
const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))
const server = () => {
    connect.server({
        root: 'dist', // 项目根路径是dist
        livereload: true, // 服务器支持热更新
        port: 2009, // 配置端口号2009
        middleware(){
            return [
                // 将以/api为开头的请求代理到域 http://localhost:80
                createProxyMiddleware('/api', {
                  target: 'http://rap2api.taobao.org/app/mock/269571',
                  changeOrigin: true
                })
              ]
        }
    })
}
const watch = () =>{
    gulp.watch(path.html.src, html)
    gulp.watch(path.css.src, css)
    gulp.watch(path.js.src, js)
}
const ico = () => gulp.src(path.ico.src).pipe(gulp.dest(path.ico.dest))
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, imgs, libs, server, watch,ico))